/*
 * @Author: dagu
 * @Description: 图片预览弹出层组件
 */

import React from 'react';

interface ImagePreviewProps {
  imageData: string | null;
  onClose: () => void;
}

const ImagePreview: React.FC<ImagePreviewProps> = ({ imageData, onClose }) => {
  if (!imageData) return null;

  return (
    <div
      className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'
      onClick={onClose}
    >
      <div
        className='relative max-w-[90vw] max-h-[90vh] bg-white p-4 rounded-lg'
        onClick={e => e.stopPropagation()}
      >
        <img
          src={imageData}
          alt='预览图片'
          className='max-w-full max-h-[calc(90vh-2rem)] object-contain'
        />
        <button
          className='absolute top-2 right-2 bg-gray-800 text-white w-8 h-8 rounded-full 
                   flex items-center justify-center hover:bg-gray-700'
          onClick={onClose}
        >
          ×
        </button>
      </div>
    </div>
  );
};

export default ImagePreview;
